<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <el-table :data="list">
            <template slot-scope="scope">
                <td>{{scope.r.id}}</td>
                <td>{{scope.r.name}}</td>
                <td>{{scope.r.sides}}</td>
            </template>
        </el-table> 
    </div>
</body>
<script>
   
//列表组件
Vue.component('el-table',{
    props:['data'],
    template:`
    <table border=1 width="60%">
        <tr v-for="r in  data">
           <slot :r="r"></slot> 
        </tr>
    </table>
    `
});

// 万能表格组件  能显示各列的数据
var vm = new Vue({
    el: "#app",
    data: {
        list: [ 
            {id:1, name: '正方形', sides: 4 }, 
            {id:2, name: '六边形', sides: 6 }, 
            {id:3, name: '三角形', sides: 3 },
            {id:4, name: '梯形',   sides: 4 }
        ]
    }
});

</script>
</html>
